<!-- form 里面是已开通的渠道数组 -->
<form [formGroup]="formGroup" nz-form>

  <ng-container *ngFor="let brand of checkedChannels$ | async">
    <div [formGroupName]="brand">
      <app-store-channel-card
        [nzTitle]="translatePaymentBrand(brand)"
        [nzExtra]="tplSwitch"
        [nzOpen]="true">

        <app-channel-form
          [fields]="channelField.get(brand)"
          [form]="formGroup.get(brand)"></app-channel-form>

      </app-store-channel-card>

      <ng-template #tplSwitch>
        <div *ngIf="switchable">
          <nz-switch formControlName="checked" (click)="onCloseChannelClick(brand)"></nz-switch>
        </div>
      </ng-template>
    </div>
  </ng-container>

</form>

<!-- form 外面需要一个未开通的渠道数组 -->
<div>

  <ng-container *ngFor="let chan of availableChannels$ | async">
    <app-store-channel-card
      [nzTitle]="translatePaymentBrand(chan)"
      [nzExtra]="tplSwitch"
      [nzOpen]="false">

    </app-store-channel-card>

    <ng-template #tplSwitch>
      <nz-switch [nzControl]="true" (click)="onOpenSwitchClick(chan)" [nzLoading]="isLoadingMap.get(chan)"></nz-switch>
    </ng-template>
  </ng-container>

</div>